<!-- Search 输入组件 -->
<script lang="ts" setup>
import InputBase from "./InputBase.vue";

// 定义 props
defineProps<{
    modelValue: string;
    autofocus?: boolean;
    maxlength?: string | number;
    placeholder?: string;
    /**
     * 是否圆边
     */
    round?: boolean;
}>();

// 定义外部事件
const emit = defineEmits(["update:modelValue"]);

// 内部事件
const onClear = () => emit('update:modelValue', '');
const onInput = (value: string) => emit('update:modelValue', value);

</script>
<template>
    <InputBase :class="round ? 'input-round' : ''" clearable :maxlength="maxlength" type="text" :model-value="modelValue"
        :autofocus="autofocus" :placeholder="placeholder" @clear="onClear" @input="onInput">
        <template #prepend>
            <div class="search-icon">
                <Icon name="icon-sousuoicon" size="20"></Icon>
            </div>
        </template>
    </InputBase>
</template>
<style lang="scss" scoped>
.search-icon {
    padding: 0 10px;
    color: #979797;
}
</style>

<style lang="scss">
.input-round .var-input .var-field-decorator__controller {
    border-radius: 48px !important;
}
</style>
